<template>
  <div class="private_chat">
    <div class="chat_box flex_colm">
      <div class="emoji bs_bdb" v-if="isEmoji">
        <div class="out_emoji">
          <div
            @click="clickEmoji(item)"
            class="inner_emoji cur_poi"
            style="display: inline-block"
            v-for="(item, i) in emojiArr"
            :key="i"
          >
            {{ item }}
          </div>
        </div>
      </div>

      <div class="head flex fff">
        <div
          :style="{
            background:
              store.liveProInfo?.obj2?.isfollow === 0
                ? 'linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%)'
                : '#eee',
            color: store.liveProInfo?.obj2?.isfollow === 0 ? '#fff' : '#aaa',
          }"
          class="head_left bs_bdb item fs_14 cur_poi"
          @click="store.handleFollow"
        >
          {{ store.liveProInfo?.obj2?.isfollow === 0 ? "关注" : "已关注" }}
        </div>
        <div class="head_midd item txt_cent">
          {{ store?.liveProInfo?.obj1?.nickname }}
        </div>
        <div class="head_right item fs_16 flex">
          <span>刷新</span>
          <div @click="handleCloseChat">
            <img
              @click="handleClosChat"
              class="cur_poi"
              src="../assets/close_head.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div id="main" class="main">
        <div class="tip_box bs_bdb">
          <div class="inner bs_bdb">
            <div class="img_two_box bs_bdb">
              <div class="left_img2 flex_row">
                <img
                  class="bd_radio"
                  style="width: 30px; height: 30px"
                  :src="store?.liveProInfo?.obj1?.headimgurl"
                  alt=""
                />
                <img
                  class="bd_radio"
                  style="width: 30px; height: 30px"
                  :src="store.loginer.user.headimgurl"
                  alt=""
                />
              </div>
              <div class="right_txt fs_12">
                <div class="flex_row">
                  <img
                    style="width: 16px; height: 16px; margin-right: 7px"
                    src="../assets/sex_2.png"
                    alt=""
                  />
                  <div
                    style="
                      background: #3c8aed;
                      border-radius: 20px;
                      width: 40px;
                      text-align: center;
                    "
                    class="fff fs_10"
                  >
                    射手座
                  </div>
                </div>
                <div style="color: #939596">你们的共同标签：射手座</div>
              </div>
            </div>

            <div class="text1 fs_12">
              <span style="color: #895cf8">你和TA的关系：</span>
              你和TA暂未建立关系
            </div>
            <div
              style="width: 243px; border: 0.5px dashed rgb(137, 92, 248, 0.2)"
            ></div>
            <div class="text2 fs_12">
              <span class="bs_bdb"> TA最近的动态:</span>
              <span>对方暂未发布过动态，快邀请TA分享下</span>
            </div>
          </div>
        </div>
        <div class="msg_box bs_bdb">
          <div
            class="inner_msg_box"
            v-for="item in store.takePrivateSD"
            :key="item.id"
          >
            <!-- 左边 -->
            <div
              class="left_box common_box"
              v-if="item.sender.id !== store.loginer.user.id"
            >
              <img
                style="margin-right: 10px"
                class="bd_radio avatar_img"
                :src="item.sender.headimgurl"
                alt=""
              />
              <img
                class="msg_img"
                v-if="item.msgtype === '2' || item.msgtype === 2"
                :src="item.message || item.msg"
                alt=""
              />
              <div v-else class="txt bs_bdb fff">
                {{ item.message || item.msg }}
              </div>
            </div>
            <div
              v-if="item.sender.id === store.loginer.user.id"
              class="right_box common_box"
            >
              <img
                class="msg_img"
                style=""
                v-if="item.msgtype === '2' || item.msgtype === 2"
                :src="item.message || item.msg"
                alt=""
              />
              <div v-else class="txt bs_bdb fff">
                {{ item.message || item.msg }}
              </div>
              <img
                style="margin-left: 10px"
                class="bd_radio avatar_img"
                :src="item.sender.headimgurl"
                alt=""
              />
            </div>
          </div>
          <!-- <img style="width:100px;height:100px" src="../../public/logo.jpg" alt=""> -->
        </div>
      </div>
      <div class="foot flex_colm bs_bdb">
        <div class="icon">
          <img
            @click="handleEmoji"
            class="cur_poi"
            style="width: 34px; height: 34px"
            src="../assets/meme.png"
            alt=""
          />
          <img
            @click="handleImg"
            class="cur_poi"
            style="width: 34px; height: 34px"
            src="../assets/ic_came.png"
            alt=""
          />
        </div>
        <el-input
          class="custom-textarea"
          resize="none"
          v-model.trim="textareaVal"
          type="textarea"
          :rows="3"
          placeholder="请输入..."
          @click="cliInp"
        />
        <!-- <dir class="inp">11111</dir> -->
        <div class="btn_box flex_row fff">
          <div class="btn cur_poi" @click="quickReply">快捷回复</div>
          <div class="btn cur_poi" @click="sendImg(1)">发送</div>
        </div>
      </div>
    </div>
    <!-- dialog -->
  </div>
</template>

<script setup>
import emoji from "../utils/emoji_list.json";

import { onMounted, ref, nextTick, watch } from "vue";
import { useCounterStore } from "../store";
import obj from "../utils";
import { getchatlist, getUploadMsg } from "../http";
import axios from "axios";
const mainUsr = JSON.parse(localStorage.getItem("info"));
const textareaVal = ref("");
const emojiArr = ref(null);
const chatArr = ref([]);
const store = useCounterStore();
const isEmoji = ref(false);
const handleClosChat = () => {
  store.isPrivateChat = false;
};
//  // i"c":" chat","m":"sendprivate","data":"frienduid":10304423,"uid":81040047,"audioTimeLength":0,"msg":"1 1 11","msgtype":1})
const handleCloseChat = () => {
  store.socketChatOB.socketSendMessage({
    c: "chat",
    m: "cleanunread",
    data: {
      frienduid: store.liveProInfo?.obj1?.id,
    },
  });
};
const sendMsgCallback = () => {
  if (store.isLine) {
    store.socketChatOB.socketSendMessage({
      c: "chat",
      m: "changereadstatus",
      data: {
        create_time: new Date().getTime(),
        frienduid: store.liveProInfo?.obj1?.id,
      },
    });
  }
};
const cliInp = () => {
  isEmoji.value = false;
};
const handleScroll = () => {
  let el = document.querySelector(".msg_box");
  nextTick(() => {
    el?.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
  });
};
const clickEmoji = (emoj) => {
  // let temp=[]
  // temp.push(emoj)
  textareaVal.value = textareaVal.value.concat(emoj);
  isEmoji.value=false;
};
const sendImg = (msgtype, img = "") => {
  console.log(msgtype, "sendImg-img-----------", img);

  // if (!textareaVal.value) {
  //   return;
  // }
  store.socketChatOB.socketSendMessage({
    c: "chat",
    m: "sendprivate",
    data: {
      uid: JSON.parse(localStorage.getItem("info"))?.user?.id,
      frienduid: store.liveProInfo?.obj1?.id,
      msgtype,
      msg: textareaVal.value ? textareaVal.value : img,
      audioTimeLength: 0,
    },
  });
  scrollToBottom();
  // xxx
  // sendMsgCallback()
  // getChats();
  textareaVal.value = "";
  handleScroll();
};
const handleEmoji = () => {
  isEmoji.value = !isEmoji.value;
  emojiArr.value = emoji.map((v) => {
    return String.fromCodePoint(v.unicode);
  });
};
const handleImg = () => {
  obj.upload().then(async (res) => {
    let msg = await getUploadMsg("image", "jpg");
    let temp = msg.data;
    if (temp.errcode === 0) {
      const form = new FormData();
      form.append("key", temp.filename);
      form.append("policy", temp.data.policy);
      form.append("OSSAccessKeyId", temp.data.accessid);
      form.append("success_action_status", "200");
      form.append("signature", temp.data.signature);
      let el = document.querySelector("#sInp");
      form.append("file", el.files[0]);
      axios
        .post(temp.data.host, form)
        .then((res) => {
          let img = temp.data.host + "/" + temp.filename;
          console.log("res--成功", temp.data.host + "/" + temp.filename);
          sendImg(2, img);
        })
        .catch((err) => {
          console.log("err--失败", err);
        });
    }
  });
};
const getChats = () => {
  getchatlist({
    // touid:store.liveProInfo.obj1.id,
    touid: 81040047,
    uid: store.loginer.id,
    jwt: store.loginer.jwt,
  }).then((chatListRes) => {
    if (chatListRes.data.errcode === 0) {
      chatArr.value = chatListRes.data.list;
    }
    console.log(" chatArr.value", chatArr.value);
  });
};
const scrollToBottom = () => {
  console.log("滚动进来");
  const contentElem = document.getElementById("main");
  contentElem.scrollTo({
    top: contentElem.scrollHeight,
    behavior: "smooth",
  });
};
watch(
  () => store.takePrivateSD,
  async (nv) => {
    await nextTick((nv) => {
      console.log("store.takePrivateSD----------------", store.takePrivateSD);
      scrollToBottom();
    });
  }
);
onMounted(() => {});
</script>

<style scoped lang="scss">
.private_chat {
  .chat_box {
    .emoji {
      padding: 5px 5px 30px;
      z-index: 9999;
      position: absolute;
      top: 135px;
      left: 7px;
      width: 281px;
      height: 290px;
      background-image: url("../assets/emem_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .out_emoji {
        overflow: auto;
        scrollbar-width: none;
        height: 100%;
      }
      .inner_emoji {
        width: 10%;
      }
    }
    width: 596px;
    height: 606px;
    background: #282c2f;
    border-radius: 8px 8px 8px 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .head {
      height: 46px;
      background: #3a4044;
      border-radius: 8px 8px 0px 0px;
      padding: 0 10px;

      .item {
      }
      .head_left {
        padding: 6px 15px;
        background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
        border-radius: 50px 50px 50px 50px;
      }
      .un_act_foll {
        background: #eee !important;
        color: #aaa !important;
      }
      .head_midd {
        flex: 1;
      }
      .head_right {
        img {
          width: 24px;
          height: 24px;
          margin-left: 17px;
        }
      }
    }
    .main {
      padding-bottom: 50px;
      box-sizing: border-box;
      flex: 1;
      overflow-y: auto;
      .tip_box {
        padding: 66px 128px 0 128px;
        .inner {
          background-image: url("../assets/privat_bg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-radius: 0px 0px 0px 0px;
          background: #eeddfd;
          // background: rgb(137, 92, 248,.1);
          border-radius: 8px;
          width: 340px;

          height: 210px;
          padding: 8px 60px 60px 57px;
          .img_two_box {
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;
            .left_img2 {
              position: relative;
              img:last-child {
                position: absolute;
                top: 0;
                right: -25px;
              }
            }
          }
          .text1 {
            margin: 17px 0;
          }
          .text2 {
            span {
              display: block;
            }
            span:first-child {
              padding: 8px 0;
            }
          }
        }
      }

      // box
      .msg_box {
        padding: 15px;
        .inner_msg_box {
          .colr {
            color: red;
          }
          .colr2 {
            color: rgb(27, 46, 216);
          }

          .common_box {
            margin-bottom: 15px;
            .msg_img {
              max-width: calc((100% - 120px) / 3);
              object-fit: contain;
            }
            .avatar_img {
              width: 50px;
              height: 50px;
            }

            .txt {
              max-width: calc(100% - 120px);
              // border: 1px solid red;
              word-wrap: break-word;
              overflow-wrap: break-word;
              // padding: 10px;
              border: 1px solid red;
              
              background: #1d1f22;
              border-radius: 8px;
            }
          }
          .left_box {
            display: flex;
            justify-content: flex-start;
          }
          .right_box {
            display: flex;
            justify-content: flex-end;
            .txt_img {
              height: 170px;
              width: 150px;
              border-radius: 8px;
            }
          }
        }
      }
    }
    .foot {
      .custom-textarea {
        border: none; /* 去掉边框 */
      }
      /* 使用 ::v-deep 来影响深层组件.el-textarea__inner */
      :deep(.el-textarea__inner) {
        height: 100px; /* 自定义高度 */
        padding: 10px; /* 添加内边距以使文本不紧贴边 */
        border: none; /* 去掉内部边框 */
      }
      :deep(.el-textarea__inner:focus) {
        box-shadow: 0 0 0 0 rgb(58, 64, 68); /* 去掉聚焦时的阴影 */
        outline: none; /* 去掉聚焦时的轮廓 */
      }
      :deep(.el-textarea) {
        border-color: #3a4044; /* 确保整个文本区域没有边框 */
        box-shadow: 0 0 0 0 rgb(58, 64, 68); /* 去掉 element-ui 默认的阴影 */
      }
      :deep(.el-textarea__inner) {
        color: #ffffff;
        background-color: #3a4044;
        border-radius: 0px 0px 8px 8px;
        // box-shadow: #3a4044;
        box-shadow: 0 0 0 0 rgb(58, 64, 68);
        width: 100%;
        // height: 124px;
      }

      // border: 1px solid red;
      width: 596px;
      height: 179px;
      background: #3a4044;
      border-radius: 0px 0px 8px 8px;
      padding: 6px 16px 15px 10px;
      position: relative;
      .icon {
        :deep(.el-textarea__inner) {
          width: 100% !important;
          background: #3a4044 !important;
          box-shadow: none !important;
          border: none !important;
        }
      }
      .inp {
        flex: 1;
      }
      .btn_box {
        position: absolute;
        bottom: 16px;
        right: 16px;
        justify-content: flex-end;
        .btn:first-child {
          padding: 5px 15px;

          background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
          border-radius: 50px 50px 50px 50px;
          margin-right: 17px;
        }
        .btn:last-child {
          padding: 5px 20px;
          background: #51585d;
          border-radius: 50px 50px 50px 50px;
        }
      }
    }
  }
}
</style>
